<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体育器材管理系统</title>
    <!-- <link rel="stylesheet" href="css/style.css"> -->
    <style>
        /* 在这里嵌入CSS样式 */
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        body {
            background-color: #4B7C99;
        }

        #bigbox {
            width: 1000px;
            margin: 0 auto;
        }

        #banner {
            width: 1000px;
            font-size: 0px;
        }

        #banner img {
            width: 1000px;
        }

        nav {
            background-color: #CCD0D9;
            width: 1000px;
            height: auto;
        }

        nav a {
            text-decoration: none;
            line-height: 60px;
            margin-left: 50px;
            margin-right: 50px;
            color: #020C16;
            font-weight: bold;
        }

        nav a:hover {
            color: #1a9be6;
        }

        .dangqian {
            color: #1a9be6;

        }

        #main {
            height: 490px;
            width: 1000px;
            margin: 0 auto;
            background-color: #86aacb;
        }

        #main_left {
            width: 300px;
            display: inline-block;
            background-color: #86aacb;
            vertical-align: top;
            /* 可选，用于对齐顶部 */
        }


        h2 {
            box-sizing: border-box;
            padding-left: 10px;
            font-size: 20px;
            line-height: 30px;
            background-color: #03151F;
            color: #CCD0D9;
        }

        #main_left img {
            width: 300px;
        }

        #main_left p {
            margin-left: 10px;
            line-height: 40px;
        }

        #main_left span {
            font-weight: bold;
        }

        #main_right {
            position: relative;
            width: 680px;
            margin-left: 20px;
            display: inline-block;
            height: 200px;
        }

        #main_right img {
            position: absolute;
            width: 260px;
            right: 0px;
            top: 30px;
        }

        #main_right p {
            width: 400px;
            display: inline-block;
            margin-left: 10px;
            text-indent: 32px;
            line-height: 30px;
            margin-top: 10px;
        }

        #luxing {
            background-color: #86aacb;
            width: 1000px;
        }

        #luxing div {
            font-size: 0px;
        }

        #picture {
            font-size: 0px;
            display: inline-block;
            margin-left: 25px;
            margin-right: 25px;
            margin-top: 25px;
        }

        #picture img {
            width: 200px;
        }

        #picture p {
            font-size: 16px;
            text-align: center;
            line-height: 60px;

        }

        footer {
            line-height: 60px;
            font-size: 14px;
            text-align: center;
            background-color: #CCD0D9;
        }

        #main_right ul li {
            width: 660px;
            margin-left: 10px;
            font-size: 12px;
            margin-top: 10px;
            border-bottom: 1px dotted #ccc;
            padding-bottom: 10px;
        }

        #main_right ul li span {
            font-size: 14px;
            font-weight: bold;
        }

        #liuyan {
            width: 660px;
            margin-left: 10px;
            margin: 20px;
            text-align: center;
        }

        #liuyan span {
            display: inline-block;
            width: 80px;
            line-height: 40px;
        }

        button {
            width: 100px;
            height: 30px;
            margin-left: 80px;
        }

        #liuyan {
            text-align: center;
        }

        .button-container {
            text-align: center;
        }

        /* 添加输入框样式 */
        input[type="text"] {
            width: 200px;
            height: 30px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-left: 10px;
        }
        input[type="number"] {
            width: 200px;
            height: 30px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-left: 10px;
        }
        input[type="submit"] {
        width: 100px;
        height: 30px;
        margin-left: 80px;
        background-color: #1a9be6;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    </style>
</head>

<body>
    <div id="bigbox">
        <div id="banner">
            <img src="wbg.png" alt="wbg.png">
        </div>
        <nav>
            <a href="/index">首页</a>
            <a class="dangqian" href="">借器材</a>
            <a href="/return">还器材</a>
            <a href="/analysis">器材使用情况AI分析</a>
            <a href="/help">使用帮助</a>
            <a href="/logout">登出</a>
        </nav>
        <div id="bigbox">
            <div id="liuyan">
                <form action="/borrow" method="post">
                    <label for="class">输入班级:</label>
                    <input type="text" id="class" name="class" required><br><br>
                    
                    <label for="name">输入姓名:</label>
                    <input type="text" id="name" name="name" required><br><br>
                    
                    <label for="code">器材编号:</label>
                    <input type="number" id="code" name="code" required><br><br>
                    
                    <input type="submit" value="借用">
                </form>
                <!-- <a href="/return">批量操作</a> -->
            </div>
        </div>
    </div>

    <script>
            //     function getValue() {
            // var classInput = document.getElementById("classInput");
            // var nameInput = document.getElementById("nameInput");
            // var equipmentCodeInput = document.getElementById("equipmentCodeInput");

            // var classValue = classInput.value;
            // var nameValue = nameInput.value;
            // var equipmentCodeValue = equipmentCodeInput.value;

            // if (classValue === "") {
            //     alert("班级不能为空");
            //     return;
            // }
            // if (nameValue === "") {
            //     alert("姓名不能为空");
            //     return;
            // }
            // if (equipmentCodeValue === "") {
            //     alert("器材编码不能为空");
            //     return;
            // }

            // alert("您输入的内容是：班级 - " + classValue + ", 姓名 - " + nameValue + ", 器材编码 - " + equipmentCodeValue);
        // }

    </script>
</body>

</html>